<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select v-model="queryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" clearable filterable @change="queryList">
					<el-option v-for="item in options.projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
				<el-select v-model="queryParams.planType" class="zs-select-md zs-space-right-sm" placeholder="计划类型" clearable filterable @change="queryList">
					<el-option v-for="item in options.planTypeList" :key="item.planType" :label="item.planTypeStr" :value="item.planType" />
				</el-select>
				<el-input v-model="queryParams.associationTaskStr" class="zs-select-md zs-space-right-sm" placeholder="关联任务" clearable @blur="queryList" />
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active':  queryParams.processInstanceName }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-input v-model="queryParams.processInstanceName" class="zs-select-md zs-space-right-sm" placeholder="流程实例" clearable @blur="queryList" />
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList" v-btnPermi="{ permis: ['p_btn_property_plan_manage_list_query'] }"> 查询 </el-button>
			</span>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" align="center" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="projectName" label="项目名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="planTypeStr" label="计划类型" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="associationTaskStr" label="关联任务" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column label="流程实例名称" align="left" show-overflow-tooltip>
					<template #default="{ row }">
						<span v-if="row.processInstanceName">{{ row.processInstanceName }}</span>
						<el-tooltip v-else effect="dark" :content="row.publishError" placement="top"> - </el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="发起时间" width="160" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="processTypeStr" label="流程状态" width="120" align="center" :formatter="defaultTableData" />
				<el-table-column prop="" label="操作" width="90" align="center">
					<template #default="{ row }">
						<el-button class="zs-link" link size="small" @click="goInfo(row)">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { planManageListApi, projectListApi, planTypeListApi } from '@/api/planManage.js';
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRouter } from 'vue-router';
	import { defaultTableData, parseTime } from '@/utils/publicUtils';

	const router = useRouter();
	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	let options = reactive({
		projectList: [],
		planTypeList: [],
	});

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	//查询条件
	let queryParams = reactive({ projectCode: '', planType: '', pageNumber: 1, pageSize: curPageSize.value });

	// 列表数据源
	const queryList = async init => {
		if (process.env.NODE_ENV !== 'development') {
			let portalResourceList = JSON.parse(localStorage.getItem('portalResourceList'));
			if (init != 'init' && !portalResourceList.includes('p_btn_property_plan_manage_list_query')) return;
		}
		tableData.loading = true;
		// let params = {
		// 	pageNumber: queryParams.pageNumber,
		// 	pageSize: queryParams.pageSize,
		// 	projectCodes: queryParams.projectCode ? [queryParams.projectCode] : [],
		// 	planTypeList: queryParams.planType ? [queryParams.planType] : [],
		// };
		let params = queryParams
		params.projectCodes = queryParams.projectCode ? [queryParams.projectCode] : []
		params.planTypeList = queryParams.planType ? [queryParams.planType] : []
		let res = await planManageListApi(params);
		if (res.data.code !== 200) return;
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			queryParams.pageSize = size;
		} else {
			queryParams.pageNumber = size;
		}
		queryList('init');
	};

	// 项目数据源
	const getProjectList = async () => {
		let res = await projectListApi();
		if (res.data.code !== 200) return;
		options.projectList = res.data.data;
	};

	// 计划类型数据源
	const getPlanTypeList = async () => {
		let res = await planTypeListApi();
		if (res.data.code !== 200) return;
		options.planTypeList = res.data.data;
	};

	//查看
	const goInfo = row => {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'page_operationTask_view',
				rTitle: '查看',
				row: row.processInstanceCode,
				processName: encodeURIComponent(row.processInstanceName),
				type: 'get',
				bpmAuditKey: row.bpmAuditKey,
				processProperty: row.processProperty,
			},
		});
	};

	getProjectList();
	getPlanTypeList();
	queryList('init');
</script>

<style scoped lang="scss"></style>
